<!DOCTYPE html>

<html>
<head>
    <title>petslib</title>
    <meta charset = "utf-8">
    <link rel = "stylesheet" type = "text/css" href = "css\main.css">
</head>

<body>
    <div class = "navigator clear-float">
        <a class = "float-left" href = "#">LOGO</a>
        <a class = "float-right" href = "#">database</a>
        <a class = "float-right" href = "#">contact</a>
        <a class = "float-right" href = "#">about</a>
        <a class = "float-right" href = "#">download</a>
    </div>

    <div class = "welcome">
        <div class = "container">
            <p class = "welcome1">welcome to the world of pets</p>
            <p class = "welcome2">getting started</p>
            <button class = "startBtn">browse</button>

            <p class = "welcome3">new to us?</p>
            <button class = "startBtn2">get started</button>
        </div>
    </div>

    <div class = "feature">
        <p>features</p>
    </div>

    <div class = "adv1 clear-float">
        <div class = "img float-left">

        </div>
        <div class = "container float-left">
            <p>millions of pets data<br>it's never a problem to find your category</p>
            <button>learn more</button>
        </div>
    </div>

    <div class = "adv2 clear-float">
        <div class = "container float-left">
            <p>more accurate, faster, easier to use</p>
            <button>learn more</button>
        </div>
        <div class = "img float-left">

        </div>
    </div>

    <div class = "product-bar">
        <p>products</p>
    </div>

    <div class = "product">
        <div class = "container1 clear-float">
            <div class = "float-left pro1">
                <img src = "img/icons8-dog-96.png">
                <p>pets database<br>anywhere, anytime</p>
                <a href = "#">see more</a>
            </div>
            <div class = "float-left pro2">
                <img src = "img/icons8-touchscreen-96.png">
                <p>mobile client<br>convenience</p>
                <a href = "#">see more</a>
            </div>
            <div class = "float-left pro3">
                <img src = "img/icons8-monitor-96.png">
                <p>desktop app</p>
                <a href = "#">Windows</a>
                <a href = "#">Mac-OS</a>
                <a href = "#">Linux</a>
            </div>
        </div>
    </div>

    <div class = "footer">
        <div class = "container">
            <img src = "img/icons8-tencent-weibo-32.png">
            <img src = "img/icons8-facebook-32.png">
            <img src = "img/icons8-instagram-32.png">
            <img src = "img/icons8-play-button-32.png">
        </div>
    </div>
</body>

</html>